<template>
	<view class="container">
		<view class="">
			<view class="ti-flex bg-white padding-22 margin-top-22 data-list-box">
				<image :src="userInfo.avatar? userInfo.avatar:'/static/missing-face.png'" mode="aspectFill"
					class="image-width-100 bg-white border-radius padding-2">
				</image>
				<view class="flex-1 margin-left-18">
					<text>{{ userInfo.nickname||userInfo.username }}</text>
					<view class="font-24">
						<text>{{ userInfo.email||userInfo.mobile }}</text>
					</view>
				</view>
				<!-- <view class="" v-if="item.checked">
					<tian-icons type="xuanze" color="#55aa00" size="20">
					</tian-icons>
				</view> -->
			</view>
			<!-- <view class="ti-flex bg-white padding-22 margin-top-22"
				v-if="!isMustUniverifyLogin && dataList && dataList.length<multipleAccount" @click="navToLogin">
				<tian-icons type="jiahao1" color="#0099ff" size="22">
				</tian-icons>
				<view class="flex-1 margin-left-18 colorBlue">
					<text>{{$w('添加或注册账号')}}</text>
				</view>
			</view> -->
		</view>

		<uni-list class="margin-top-22">
			<uni-list-item clickable @click="logout" link class="">
				<template v-slot:body>
					<text>{{$w('退出当前账号')}}</text>
				</template>

			</uni-list-item>
		</uni-list>.
		<!-- <view class="">
			<button type="default" @click="test">test</button>
		</view> -->
		<!-- <view class="" @click="test">
			<button type="default">test</button>
		</view> -->
		<uv-modal ref="uvModal" :title="uvModelParam.title" :content='uvModelParam.content' :align="uvModelParam.align"
			:confirmText="uvModelParam.confirmText" :cancelText="uvModelParam.cancelText"
			:showCancelButton="uvModelParam.showCancelButton"></uv-modal>
	</view>
</template>

<script>
	import mixin from '@/common/mixin/common-mixin-wjf.js'
	const uniIdCo = uniCloud.importObject("uni-id-co", {
		loadingOptions: {
			title: ''
		}
	})
	import message from '../i18n/index.js'
	const $w = (key) => {
		return message[uni.getLocale()][key]
	}
	export default {
		mixins: [mixin],
		data() {
			return {
				cachekey: 'tiantian-accounts',
				// dataList: []
			};
		},
		onLoad() {
			// this.loadData();
			// console.log('组件accoount onLoad');
		},
		onShow() {
			// console.log('组件accoount onShow');
			// this.loadData();
		},
		computed: {
			$w() {
				return $w
			},
			userInfo() {
				return this.$store.state.user.userInfo
			}
		},
		methods: {
			test() {
				this.loadData()
			},
			// loadData() {
			// 	this.dataList = uni.getStorageSync(this.cachekey);
			// 	if (!this.dataList) {
			// 		this.dataList = []
			// 	}
			// 	this.dataList.forEach(item => {
			// 		item.checked = this.userInfo._id == item._id;
			// 	})
			// 	console.log(this.dataList);
			// },

			logout_() {
				this.confirmAction(async () => {
					uni.showLoading({
						title: this.$w("正在退出")
					})
					// this.$request('user/login/logout').then(
					// 	res => {
					// 		this.$success("退出成功")
					// 		console.log('退出成功', res);
					// 		this.localLogout();
					// 	},
					// 	err => {
					// 		this.$success("退出失败")
					// 		console.log('退出失败', err);
					// 		this.localLogout();
					// 	}
					// );
					// mutations.logout();

					// 1. 已经过期就不需要调用服务端的注销接口	2.即使调用注销接口失败，不能阻塞客户端
					if (uniCloud.getCurrentUserInfo().tokenExpired > Date.now()) {
						try {
							await uniIdCo.logout()
						} catch (e) {
							console.error(e);
						}
					}
					// uni.removeStorageSync('uni_id_token');
					// uni.setStorageSync('uni_id_token_expired', 0)
					uni.clearStorage();
					this.localLogout();
				}, this.$w('是否确定退出系统？'));
			},
			logout() {
				this.$uvModal({
					content: this.$w('是否确定退出系统？'),
					confirmText: this.$w('确认'),
					showCancelButton: true,
					cancelText: this.$w('取消')
				}, async () => {
					// 1. 已经过期就不需要调用服务端的注销接口	2.即使调用注销接口失败，不能阻塞客户端
					if (uniCloud.getCurrentUserInfo().tokenExpired > Date.now()) {
						try {
							await uniIdCo.logout()
						} catch (e) {
							console.error(e);
						}
					}
					uni.clearStorage();
					this.localLogout();
				})
			},
			localLogout() {
				let data = [];
				//移除accounts
				if (this.dataList && this.dataList.length > 1) {
					data = this.dataList.filter(e => e._id != this.userInfo._id);
				}
				uni.setStorageSync(this.cachekey, data);
				// if (data.length == 0) {
				// 	//移除本地token
				// 	this.$store.commit('user/REMOVE_TOKEN');
				// 	//重置用户信息
				// 	this.$store.commit('user/SET_USER_INFO', {});
				// 	uni.removeStorageSync('uni-id-pages-userInfo') //同步删除uni-id-pages中的本地userInfo存储  __WJF
				// 	//清空购物车
				// 	this.$store.commit('mall/UPDATE_CART_NUMBER', 0);
				// } else {
				// 	let item = data[0];
				// 	//切换到第一个
				// 	this.$store.commit('user/SET_TOKEN', {
				// 		token: item.token,
				// 		tokenExpired: item.tokenExpired,
				// 		userInfo: item,
				// 	})
				// }
				uni.hideLoading();
				// this.navTimeBack(true, 100);
				uni.$emit('uni-id-pages-logout')
				uni.reLaunch({
					url: '/pages/index/user'
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		max-width: 800px;
		height: 100vh;
		/* 设置最大宽度 */
		margin: 0 auto;
		/* 居中显示 */
		// padding: 20px;
		/* 添加内边距（可选） */
		background-color: #eee;
	}

	// #ifdef H5
	.data-list-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	// #endif
</style>